import React from 'react'
import { View, StyleSheet, ViewStyle } from 'react-native'
import { commonStyle, translateSize } from 'styles'
import { InfoLayout } from 'components'
import { PosGetInOutput } from 'api/pos';

export interface TradeDetailItemProps {
	hideDivier?: boolean
	showBank?: boolean
	style?: ViewStyle
	posGetin: PosGetInOutput
}

const TradeDetailItem: React.FC<TradeDetailItemProps> = props => {
	return (
		<View style={[commonStyle.containerColumn, styles.container, props.style]}>
			<InfoLayout title="交易类型:" content={props.posGetin.posGetIn.payMode === "card" ? "银行卡" : "扫码"} hideDivier={props.hideDivier} smallFont={true} />
			<InfoLayout
				title="卡号:"
				content={props.posGetin.posGetIn.cardNo}
				hideDivier={props.hideDivier}
				smallFont={true}
			/>
			<InfoLayout
				title="交易时间:"
				content={`${props.posGetin.posGetIn.date} ${props.posGetin.posGetIn.time}`}
				hideDivier={props.hideDivier}
				smallFont={true}
			/>
			<InfoLayout title="批次号:" content={props.posGetin.posGetIn.batchNo} hideDivier={props.hideDivier} smallFont={true} />
			<InfoLayout title="凭证号" content={props.posGetin.posGetIn.traceNo} hideDivier={props.hideDivier} smallFont={true} />
			{props.showBank ? (
				<InfoLayout title="收款银行" content={props.posGetin.posGetIn.bankName} hideDivier={props.hideDivier} smallFont={true} />
			) : (
					<React.Fragment />
				)}
		</View>
	)
}

interface TradeDetailItemStyle {
	container: ViewStyle
}

const styles = StyleSheet.create<TradeDetailItemStyle>({
	container: {
		paddingVertical: translateSize(32),
		width: '100%',
	},
})

export default TradeDetailItem
